<template>
  <div class="app-container">
    <el-form inline :model="dataForm">
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="addHandle()"
          >{{ $t("add") }}</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      :data="dataList"
      row-key="id"
      border
      style="width: 100%"
      v-loading="dataListLoading"
      :header-cell-style="{ background: '#f2f2f2' }"
    >
      <el-table-column
        prop="title"
        header-align="center"
        min-width="150"
        label="表单名称"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="UpdateHandle(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="deleteHandle(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getFormList } from '@/api/application'
export default {
  data() {
    return {
      dataForm: {},
      dataList: [],
      dataListLoading: false,
    };
  },
  props: ['apps'],
  components: {
  },
  created() {
    this.init();
  },
  methods: {
    // 获取全部菜单树形结构  /base/api/sys-menu/all
    async init() {
      this.dataListLoading = true;
      try {
        const res = await getFormList({ appId:  + this.apps.id});
        this.dataList = res.data;
      } finally {
        this.dataListLoading = false;
      }
    },

    // 新增
    addHandle(id) {
      this.$router.push('/nuwaform/design/' + this.apps.id)
    },

    // 修改
    UpdateHandle(item) {
      this.$router.push('/nuwaform/design/' + item.appId + '/' + item.busiKey)
    },

    // 删除菜单 /nuwa-sys-menu/del
    deleteHandle(item) {
      this.$confirm(`确定对[表单=${item.title}]进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            let param = {
              autoTableName: item.autoTableName,
              ids: [item.id],
              appId: item.appId
            }
            console.log(param)
            const res = await deleteFormList(param);
            if (res.code === 200) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.init();
                },
              });
            } else {
              this.$message.error("删除失败");
            }
          } catch (e) {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {});
    },
  },
  computed: {
    appId() {
      return this.$store.state.application.appId;
    },
  },
};
</script>
